<template>
    <view>
        <div class="flex-content" v-for="item in list" :key="item">
            <nut-cell-group>
                <nut-cell :center="true" title="我的宠物" is-link @click="jumpTo('/packageA/pages/petIDList/index')">
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;" src="https://cxj.szzkba.cn/up/uploadPath/icon/pP9uGB6.png">
                        </image>
                    </template>
                    <template v-slot:link>
                        <span class="flex-link-font">查看我的宠物</span>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/up/uploadPath/icon/64819f271ddac507cccac341.png">
                        </image>
                    </template>
                </nut-cell>
                <nut-cell :center="true" title="订单中心" is-link @click="jumpTo('/packageA/pages/orderList/index')">
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/up/uploadPath/icon/6482ceec1ddac507cc947db2.png">
                        </image>
                    </template>
                    <template v-slot:link>
                        <span class="flex-link-font">查看所有的订单</span>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/up/uploadPath/icon/64819f271ddac507cccac341.png">
                        </image>
                    </template>
                </nut-cell>
                <nut-cell :center="true" title="收藏中心" is-link @click="jumpTo('/packageA/pages/collectPage/index')">
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/up/uploadPath/icon/6482cf9d1ddac507cc9564cd.png">
                        </image>
                    </template>
                    <template v-slot:link>
                        <span class="flex-link-font">查看全部</span>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/up/uploadPath/icon/64819f271ddac507cccac341.png">
                        </image>
                    </template>
                </nut-cell>
                <nut-cell :center="true" title="附近门店" is-link @click="showToast('正在筹备中，敬请期待!')">
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/up/uploadPath/icon/6482ceec1ddac507cc947dca.png">
                        </image>
                    </template>
                    <template v-slot:link>
                        <span class="flex-link-font">查看所有 {{ item.shop_number }} 家门店</span>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/up/uploadPath/icon/64819f271ddac507cccac341.png">
                        </image>
                    </template>
                </nut-cell>
                <nut-cell :center="true" title="我的优惠券" is-link @click="jumpTo('/packageA/pages/couponList/index')">
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/up/uploadPath/icon/6482ceec1ddac507cc947de1.png">
                        </image>
                    </template>
                    <template v-slot:link>
                        <span class="flex-link-font">查看全部</span>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/up/uploadPath/icon/64819f271ddac507cccac341.png">
                        </image>
                    </template>
                </nut-cell>
            </nut-cell-group>
        </div>
        <div class="flex-content" v-if="user.t == 'takerUser'">
            <nut-cell-group>
                <nut-cell :center="true" title="我的推广" is-link @click="jumpTo('/packageA/pages/promotion/index')">
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;" src="https://cxj.szzkba.cn/up/uploadPath/icon/pP4O8Zn.png">
                        </image>
                    </template>
                    <template v-slot:link>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/up/uploadPath/icon/64819f271ddac507cccac341.png">
                        </image>
                    </template>
                </nut-cell>
            </nut-cell-group>
        </div>
        <div class="flex-content">
            <nut-cell-group>
                <nut-cell :center="true" title="帮助与反馈" is-link @click="jumpTo('/packageA/pages/feedback/index')">
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/up/uploadPath/icon/6482d1721ddac507cc97ba17.png">
                        </image>
                    </template>
                    <template v-slot:link>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/up/uploadPath/icon/64819f271ddac507cccac341.png">
                        </image>
                    </template>
                </nut-cell>
                <nut-cell :center="true" title="退出登录" is-link @click="loginOut">
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/up/uploadPath/icon/6482d1721ddac507cc97b9cd.png">
                        </image>
                    </template>
                    <template v-slot:link>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/up/uploadPath/icon/64819f271ddac507cccac341.png">
                        </image>
                    </template>
                </nut-cell>
            </nut-cell-group>
        </div>
        <nut-toast :msg="msg" v-model:visible="show" :type="type" :cover="cover" />
    </view>
</template>

<script lang="ts">
import Taro, { } from '@tarojs/taro'
import { reactive, toRefs, onMounted } from 'vue';
import mitt from "../../../utils/mitt";
import { Cell, CellGroup } from '@nutui/nutui';
export default {
    components: {
        'nut-cell': Cell,
        'nut-cell-group': CellGroup
    },
    setup() {
        const state = reactive({
            list: [
                {
                    shop_number: 0
                }
            ],
            msg: '',
            show: false,
            type: 'text',
            cover: false,
            user: {}
        });
        onMounted(() => {
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    state.user = res.data
                }
            })
        })
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path })
        }
        const showToast = (msg) => {
            state.msg = msg
            state.show = true
        }
        const loginOut = () => {
            Taro.showModal({
                title: '提示',
                content: '是否确认退出登录？',
                success: function (res) {
                    if (res.confirm) {
                        Taro.clearStorage()
                        Taro.navigateTo({ url: '/pages/mypage/index?name=myPage' })
                        mitt.emit("hasLogin", false)
                    }
                }
            })
        }
        return {
            ...toRefs(state), jumpTo, showToast, loginOut
        };
    }
};
</script>

<style lang="scss" >
.nut-row {
    overflow: hidden;

}


.flex-content {
    margin: 5% auto 0;
    width: 90%;
    align-items: center;
    background-color: white;
}

.flex-link-font {
    font-size: 24px;
    color: #8a8a8a;
}
</style>